<template>
  <div class="answernaire">
    <div class="main" :style="{ width: main + `vw` }">
      <div class="imgs"></div>
      <!-- 当前的这个状态允许展示-->
      <div v-if="showa">
        <h1 class="titlea">{{ this.findDataId.formName }}</h1>
        <h5 class="titleb">{{ this.findDataId.formDes }}</h5>
        <div v-for="(item, key) in this.findDataId.formItem" :key="key">
          <!-- 单选的div -->
          <div v-if="item.type == 'radio'" class="radio">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定字体的颜色-->
            <!-- <h5>{{ typeof JSON.parse(item.tipsColor) }}</h5> -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <!--result.form_text[key].option.item_id-->
            <el-radio-group v-model="result.form_text[key].option.option_id">
              <ul v-for="(item, key) in item.option" :key="'radio' + key">
                <li>
                  <!-- 这里的v-model是一定需要绑定一个对象 数据库需要减一-->
                  <el-radio :label="item.id + 1">{{ item.text }}</el-radio>
                </li>
              </ul>
            </el-radio-group>
          </div>
          <!--  -->
          <div v-if="item.type == 'multiple'" class="multiple">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定字体的颜色-->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <!--<h1>{{ result.form_text[key].option }}</h1>-->
            <el-checkbox-group v-model="result.form_text[key].option">
              <ul v-for="(item, key) in item.option" :key="key">
                <el-checkbox
                  :label="
                    JSON.stringify({
                      item_id: item.item_id,
                      option_id: item.id,
                    })
                  "
                  >{{ item.text }}</el-checkbox
                >
              </ul>
            </el-checkbox-group>
          </div>
          <!-- 填空的div -->
          <div v-else-if="item.type == 'completion'" class="completion">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <!-- <h1>{{item.option[0].def}}</h1> -->
            <el-row>
              <el-input
                v-model="result.form_text[key].option.text"
                prefix-icon="iconfont icon-plus-blanksfill"
              />
            </el-row>
          </div>
          <!-- 简答题 -->
          <div v-else-if="item.type == 'field'" class="field">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <el-row>
              <el-input
                type="textarea"
                v-model="result.form_text[key].option.text"
                prefix-icon="iconfont icon-jianda"
              />
            </el-row>
          </div>
          <!--下拉选择框-->
          <div v-else-if="item.type == 'select'" class="select">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定字体的颜色 <h1>{{ item.option[2].text }}</h1> -->
            <!-- <h1>{{item.tipsColor}}</h1> -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <el-select
              v-model="result.form_text[key].option.option_id"
              placeholder="请选择"
            >
              <ul v-for="(item, key) in item.option" :key="key">
                <li>
                  <el-option :value="item.id + 1" :label="item.text">
                  </el-option>
                </li>
              </ul>
            </el-select>
          </div>
          <!-- 数字的div -->
          <div v-else-if="item.type == 'number'" class="number">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <!-- <h1>{{item.option[0].def}}</h1> -->
            <el-row>
              <el-input
                v-model="result.form_text[key].option.number"
                oninput="value=value.replace(/[^\d]/g,'')"
                prefix-icon="iconfont icon-shuzi"
              />
            </el-row>
          </div>
          <!-- 图片单选 -->
          <div v-else-if="item.type == 'imgSingle'" class="imgSingle">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <!-- <h3>{{item.option[0].imageurl}}</h3> -->
            <!--这里拼接的是后端照片地址 :src-->
            <div class="left_imgs">
              <el-radio-group v-model="result.form_text[key].option.option_id">
                <div
                  class="ysimgs"
                  v-for="(item1, index1) in item.option"
                  :key="index1"
                >
                  <img
                    :src="imgsUrl + item1.imageurl"
                    width="130px"
                    height="200px"
                  />
                  <br />
                  <el-radio :label="item1.id"></el-radio>
                </div>
              </el-radio-group>
            </div>
          </div>
          <!--名字-->
          <div v-else-if="item.type == 'name'" class="name">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <!-- <h1>{{item.option[0].def}}</h1> -->
            <el-row>
              <el-input
                v-model="result.form_text[key].option.text"
                prefix-icon="iconfont icon-xingming"
              />
            </el-row>
          </div>
          <!-- 性别的div -->
          <div v-if="item.type == 'gender'" class="gender">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定字体的颜色-->
            <!-- <h5>{{ typeof JSON.parse(item.tipsColor) }}</h5> -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <!--result.form_text[key].option.item_id-->
            <el-radio-group v-model="result.form_text[key].option.option_id">
              <ul v-for="(item, key) in item.option" :key="'radio' + key">
                <li>
                  <!-- 这里的v-model是一定需要绑定一个对象 数据库需要减一-->
                  <el-radio :label="item.id + 1">{{ item.text }}</el-radio>
                </li>
              </ul>
            </el-radio-group>
          </div>
          <!-- 年龄的div -->
          <div v-if="item.type == 'age'" class="age">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定字体的颜色-->
            <!-- <h5>{{ typeof JSON.parse(item.tipsColor) }}</h5> -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <!--result.form_text[key].option.item_id-->
            <el-radio-group v-model="result.form_text[key].option.option_id">
              <ul v-for="(item, key) in item.option" :key="'radio' + key">
                <li>
                  <!-- 这里的v-model是一定需要绑定一个对象 数据库需要减1-->
                  <el-radio :label="item.id + 1">{{ item.text }}</el-radio>
                </li>
              </ul>
            </el-radio-group>
          </div>
          <!-- 学历的div education -->
          <div v-if="item.type == 'education'" class="education">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定字体的颜色-->
            <!-- <h5>{{ typeof JSON.parse(item.tipsColor) }}</h5> -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <!--result.form_text[key].option.item_id-->
            <el-radio-group v-model="result.form_text[key].option.option_id">
              <ul v-for="(item, key) in item.option" :key="'radio' + key">
                <li>
                  <!-- 这里的v-model是一定需要绑定一个对象 数据库需要减1-->
                  <el-radio :label="item.id + 1">{{ item.text }}</el-radio>
                </li>
              </ul>
            </el-radio-group>
          </div>
          <!-- 手机的div -->
          <div v-else-if="item.type == 'iphone'" class="iphone">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <!-- <h1>{{item.option[0].def}}</h1> -->
            <el-row>
              <el-input
                v-model="result.form_text[key].option.text"
                oninput="value=value.replace(/[^\d]/g,'')"
                prefix-icon="iconfont icon-dianhua"
              />
            </el-row>
          </div>
          <!-- 邮箱的div email -->
          <div v-else-if="item.type == 'email'" class="email">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <!-- <h1>{{item.option[0].def}}</h1> -->
            <el-row>
              <el-input
                v-model="result.form_text[key].option.text"
                prefix-icon="iconfont icon-youxiang"
              />
            </el-row>
          </div>
          <!-- 电话的div mobile-->
          <div v-else-if="item.type == 'mobile'" class="mobile">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <!-- <h1>{{item.option[0].def}}</h1> -->
            <el-row>
              <el-input
                v-model="result.form_text[key].option.text"
                oninput="value=value.replace(/[^\d]/g,'')"
                prefix-icon="iconfont icon-phone"
              />
            </el-row>
          </div>
          <!--生日-->
          <div v-else-if="item.type == 'birthday'" class="birthday">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <!-- <h1>{{item.option[0].def}}</h1> -->
            <el-row>
              <el-date-picker
                placeholder="请选择日期"
                type="date"
                v-model="result.form_text[key].option.text"
                prefix-icon="iconfont icon-shengri"
              />
            </el-row>
          </div>
        </div>
      </div>
      <div v-if="showb" class="yc">
        <h1>当前问卷已经不允许填写,请等待重新开启...</h1>
        <el-image
          v-if="this.$store.state.judge"
          style="width: 600px; height: 425px"
          src="../../../static/imgs/header/kaifa.jpg"
        >
        </el-image>
      </div>
      <!-- 保存提交的按钮 -->
    </div>
    <div class="bottom" v-show="showa">
      <el-button class="button" type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>
<script>
// axios展示图片
// import axios from "axios";
import moment from "moment"; //处理时间格式
import {
  findAllData,
  answernaireData,
  answernaireSubmit,
  addCount,
  selectState,
} from "../../../network/index";
export default {
  inject: ["reload"], //注入reload方法
  data() {
    return {
      // main的宽度
      main: 40,
      // 判断是否还能展示
      showa: true,
      showb: false,
      // 判断是否全部都填写了答案
      state: 0,
      // 图片拼接的路径
      imgsUrl: "",
      findDataId: {},
      timer: "",
      // 提交的答案
      result: {
        form_id: "",
        cityName: localStorage.getItem("cityname"), //ip地址所在城市的名字
        index: localStorage.getItem("Ip"), //ip地址
        time: 0, //s
        form_text: [],
      },
    };
  },
  filters: {
    dateFilter(res) {
      return moment(res).formId("YYYY-MM-DD");
    },
  },
  methods: {
    // 添加判断方法
    // 根据判断进行相关的展示
    // 判断是pc端还是手机端
    isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      if (flag) {
        // 手机端  修改vuex里面的数据
        this.$store.commit("judgexg", false);
        // console.log(this.$store.state.judge);
        // 修改宽度
        this.main = 90;
      } else {
        // pc端
        this.$store.commit("judgexg", true);
      }
    },
    findAllData() {
      findAllData().then((res) => {
        if (res != null) {
          this.list = res.data;
          // console.log(res);
        } else {
          console.log("失败...");
        }
      });
    },
    findId() {
      let url = window.location.href;
      let urlId = url.split("?id")[1].split("?")[0].substring(1); //urlId = id
      // 查看是否允许填写的状态
      selectState({ formId: urlId }).then((res) => {
        if (res != null) {
          // console.log(res.data.state)
          if (res.data.state == 0) {
            this.showa = false;
            this.showb = true;
          } else {
            this.showa = true;
            this.showb = false;
          }
        }
      });
      // 每发一次请求加增加一次访问量
      // 添加访问次数
      addCount({ formId: urlId }).then((res) => {
        if (res != null) {
          // console.log("添加访问次数成功...");
        }
      });
      answernaireData({ id: urlId }).then((res) => {
        if (res != null) {
          this.findDataId = res.data;
          this.result.form_id = this.findDataId.id;
          // forEach遍历数组
          this.findDataId.formItem.forEach((element) => {
            if (element.type == "radio") {
              let obj = {
                type: "radio",
                option: {
                  item_id: element.id,
                  option_id: element.option[0].id,
                  text: "",
                },
              };
              this.result.form_text.push(obj);
            } else if (element.type == "multiple") {
              // 添加多选答案存储对象
              let obj = {
                type: "multiple",
                option: [],
              };
              this.result.form_text.push(obj);
            } else if (element.type == "completion") {
              // 添加填空答案存储对象
              let obj = {
                type: "completion",
                option: {
                  item_id: element.id,
                  text: "",
                },
              };
              this.result.form_text.push(obj);
            } else if (element.type == "field") {
              // 添加填空答案存储对象
              let obj = {
                type: "field",
                option: {
                  item_id: element.id,
                  text: "",
                },
              };
              this.result.form_text.push(obj);
            } else if (element.type == "number") {
              // 添加填空答案存储对象
              let obj = {
                type: "number",
                option: {
                  item_id: element.id,
                  number: "",
                },
              };
              this.result.form_text.push(obj);
            } else if (element.type == "imgSingle") {
              // 添加填空答案存储对象
              let obj = {
                type: "imgSingle",
                option: {
                  item_id: element.id,
                  option_id: "",
                },
              };
              this.result.form_text.push(obj);
            } else if (element.type == "select") {
              // 下拉选择框
              let obj = {
                type: "select",
                option: {
                  item_id: element.id,
                  option_id: element.option[1].id,
                  text: "",
                },
              };
              this.result.form_text.push(obj);
            } else if (element.type == "name") {
              // 添加填空答案存储对象
              let obj = {
                type: "name",
                option: {
                  item_id: element.id,
                  text: "",
                },
              };
              this.result.form_text.push(obj);
            } else if (element.type == "gender") {
              let obj = {
                type: "gender",
                option: {
                  item_id: element.id,
                  option_id: element.option[0].id,
                  text: "",
                },
              };
              this.result.form_text.push(obj);
            } else if (element.type == "age") {
              let obj = {
                type: "age",
                option: {
                  item_id: element.id,
                  option_id: element.option[0].id,
                  text: "",
                },
              };
              this.result.form_text.push(obj);
            } else if (element.type == "education") {
              let obj = {
                type: "education",
                option: {
                  item_id: element.id,
                  option_id: element.option[0].id,
                  text: "",
                },
              };
              this.result.form_text.push(obj);
            } else if (element.type == "iphone") {
              let obj = {
                type: "iphone",
                option: {
                  item_id: element.id,
                  text: "",
                },
              };
              this.result.form_text.push(obj);
            } else if (element.type == "email") {
              let obj = {
                type: "email",
                option: {
                  item_id: element.id,
                  text: "",
                },
              };
              this.result.form_text.push(obj);
            } else if (element.type == "mobile") {
              let obj = {
                type: "mobile",
                option: {
                  item_id: element.id,
                  text: "",
                },
              };
              this.result.form_text.push(obj);
            } else if (element.type == "birthday") {
              let obj = {
                type: "birthday",
                option: {
                  item_id: element.id,
                  text: "",
                },
              };
              this.result.form_text.push(obj);
            }
          });
        } else {
          console.log("失败");
        }
        // 打印答案
      });
    },
    // 提交的按钮
    submit() {
      //当前这个问卷被填写的时长
      let data = this.result;
      data.form_text.forEach((element) => {
        if (element.type == "multiple") {
          let array = [];
          element.option.forEach((ele) => {
            array.push(JSON.parse(ele));
          });
          element.option = array;
        }
        // 判断答案是否为空
      });
      console.log(this.result);
      answernaireSubmit(this.result).then((res) => {
        if (res.code == 200) {
          this.$notify({
            title: "成功",
            message: "你完成了此次问卷调查",
            type: "success",
          });
        } else {
          this.$message.error("错了哦，提交错误");
        }
      });
      this.reload();
    },
    // 计算时间
    get() {
      this.result.time++;
    },
  },
  created() {
    this.findAllData();
    this.findId();
    // 赋值
    this.imgsUrl = this.$root.imgsurl;
  },
  // 挂载
  mounted() {
    this.timer = setInterval(this.get, 1000);
    // 判断是pc端还是手机端
    this.isMobile();
  },
  // 销毁
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped>
/** 使用lib-flexible进行自适应 1rem=54px*/
* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
.answernaire {
  background-color: #f5ecfd;
}
.titlea {
  font-size: 0.5rem;
}
.titleb {
  font-size: 0.3rem;
}
.main {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.main .imgs {
  flex: 0 0 10vw;
  background-image: url("/static/imgs/users/main.jpg");
  background-size: cover;
}
.main div:nth-child(2) {
  flex: 0 0 auto;
  background-color: #ffffff;
  text-align: left;
  margin-top: 0.2rem;
  padding: 0.4rem;
}
.radio,
.multiple,
.completion,
.field,
.number,
.select,
.imgSingle,
.name,
.gender,
.age,
.education,
.iphone,
.email,
.mobile,
.birthday {
  margin-top: 0.2rem;
  font-size: 0.4rem;
}

.imgSingle img {
  width: 4rem;
  height: 8rem;
}
.button {
  width: 4rem;
  height: 2rem;
  text-align: center;
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}
.left_imgs {
  display: flex;
  width: 100%;
}
.left_imgs .ysimgs {
  padding: 0;
  margin: 0;
  float: left;
}
.left_imgs .ysimgs:nth-child(2) {
  padding: 0;
  margin: 0;
}
/*不允许填写的div样式*/
.yc {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin: 0 auto;
  text-align: center;
}
</style>